<template>
  <div class="grid items-center gap-4 mb-4">
    <Label for="webhook-url">
      {{ t("Feishu WebHookUrl") }}<span style="color: red"><sup>*</sup></span>
    </Label>
    <Input
      id="webhook-url"
      v-model="pageData.feishuWebHookUrl"
      type="url"
      pattern="https?://.+"
      @change="updateValueFn"
    />
  </div>
  <div>
    <span style="color: red; margin-right: 8px"><sup>*</sup></span>
    {{ $t("Required") }}
  </div>
  <Translation
    tag="p"
    keypath="wayToGetTeamsURL"
    class="text-xs opacity-85 mb-4"
  >
    <a href="https://www.feishu.cn/hc/zh-CN/articles/360024984973" target="_blank" class="break-words underline hover:text-primary">{{ t("here") }}</a>
  </Translation>
</template>

<script setup lang="ts">
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ref } from "vue";

import { useI18n, Translation } from "vue-i18n";

const { t } = useI18n();

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      feishuWebHookUrl: "",
      webhookContentType: "",
      webhookCustomBody: "",
    }),
  },
});

const pageData = ref(props.data);

const emits = defineEmits(["update"]);

const updateValueFn = () => {
  emits("update", {
    feishuWebHookUrl: pageData.value.feishuWebHookUrl,
    webhookContentType: pageData.value.webhookContentType,
    webhookCustomBody: pageData.value.webhookCustomBody,
  });
};
</script>
